<template>
  <div class="flex flex-col">
    <div class="msg-tpl-dft-wrap">
      <div v-if="formId === -1" class="mb-1">系统通用模板编码参考：</div>
      <div v-else class="mb-1">表单下通用模板编码参考：</div>
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="msg-tpl-dft">
            <b>审核人任务通知模板</b>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_APPROVE_TPL'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.wechat" />
              </span>
              <b>_FLOW_APPROVE_TPL</b>
            </div>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_APPROVE_WEB'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.pc" />
              </span>
              <b>_FLOW_APPROVE_WEB</b>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="msg-tpl-dft">
            <b>流程暂停通知发起人模板</b>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_PAUSE_WX'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.wechat" />
              </span>
              <b>_FLOW_PAUSE_WX</b>
            </div>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_PAUSE_WEB'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.pc" />
              </span>
              <b>_FLOW_PAUSE_WEB</b>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="msg-tpl-dft">
            <b>暂停再提交通知审核人模板</b>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_RESTART_WX'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.wechat" />
              </span>
              <b>_FLOW_RESTART_WX</b>
            </div>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_RESTART_WEB'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.pc" />
              </span>
              <b>_FLOW_RESTART_WEB</b>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="msg-tpl-dft">
            <b>不通过通知发起人模板</b>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_NO_WX'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.wechat" />
              </span>
              <b>_FLOW_NO_WX</b>
            </div>
            <div class="msg-tpl-dft-item" v-copy="'_FLOW_NO_WEB'">
              <span class="msg-tpl-dft-item-label">
                <JIcon :icon="DFT_ICONS.pc" />
              </span>
              <b>_FLOW_NO_WEB</b>
            </div>
          </div>
        </el-col>
      </el-row>
      <!--<table class="table" style="margin-bottom: 0px;">
          <tr><th>模板编码</th><th>模板描述</th></tr>
          <tr><td style="padding-right: 20px;">_FLOW_APPROVE_TPL</td><td>流程审核全局默认模板</td></tr>
      </table>-->
    </div>
    <div class="comps" v-loading="loading">
      <el-row :gutter="10">
        <el-col :span="6">
          <div
            class="comp-box comp-plain cursor-pointer"
            @click="handleShowCreate()"
          >
            <div class="comp-body" style="font-size: 16px">
              <el-button
                class="comp-action"
                type="text"
              >
                <template #icon>
                  <JIcon :icon="DFT_ICONS.add" />
                </template>新模板
              </el-button>
              <!--<span class="comp-action" @click="handleShowConfig()">配置参考</span>-->
            </div>
          </div>
        </el-col>
        <el-col :span="6" v-for="temp in templates" :key="temp.id">
          <div
            class="comp-box comp-plain"
            :class="{ active: temp?.id === selected?.id }"
            @click="handleSelect(temp)"
          >
            <JIcon
              :icon="$formUtils.getMsgTypeIcon(temp.type)"
              class="comp-type"
              :class="`comp-type-${temp.type}`"
            />
            <div class="comp-body">
              <div v-html="temp.msg_name"></div>
              <p v-html="temp.msg_code" v-copy="temp.msg_code"></p>
            </div>
            <div class="actions">
              <!--<el-button size="small" type="text" @click="handleDownload(temp)">下载</el-button>-->
              <el-button size="small" type="text" @click="handleShowEdit(temp)">编辑</el-button>
              <el-button size="small" type="text" @click="handleShowDelete(temp)">删除</el-button>
            </div>
            <JIcon :icon="DFT_ICONS.check" class="comp-selected" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
    <el-dialog
      v-model="formTempWinShow"
      :title="formTempWinName"
      :close-on-click-modal="false"
      :append-to-body="true"
      class="form-dialog-fullscreen"
    >
      <msgtpl-create
        v-if="formTempWinShow"
        :tpl-id="form.id"
        :form-id="formId"
        :tpl-form="formInfo"
        @close="handleCustomCloseWin"
      />
    </el-dialog>
</template>

<script setup>
import _ from 'lodash';
import { ref, onMounted, watch } from 'vue';
import MsgtplCreate from './msgtpl-create.vue';
import { api } from '@jzl/api';
import { DFT_ICONS } from '@jzl/icons';
import { $formUtils, $jui } from '@jzl/utils';

// Props
const props = defineProps({
  formId: [String, Number]
});

// State
const loading = ref(false);
const templates = ref([]);
const selected = ref(null);
const form = ref({});
const formTempWinName = ref('');
const formTempWinShow = ref(false);
const formInfo = ref(null);

// Methods
const init = async () => {
  loading.value = true;

  if (!props.formId && props.formId !== -1) return;

  let datas = await api.msgtpl.queryTplsByForm(props.formId);
  templates.value = datas || [];
  loading.value = false;

  if (props.formId > 0) {
    formInfo.value = await api.form.getFormById(props.formId);
  }
};

const handleShowCreate = () => {
  form.value = {};
  formTempWinName.value = '新增模板';
  formTempWinShow.value = true;
};

const handleShowEdit = (temp) => {
  form.value = JSON.parse(JSON.stringify(temp));
  const name = `${temp.msg_name}(${temp.msg_code})`;
  formTempWinName.value = `修改模板【${name}】`;
  formTempWinShow.value = true;
};

const handleShowDelete = async (func) => {
  const name = func.msg_name;
  const typeName = '消息模板';
  const msg = `确定删除${typeName}【${name}】?`;

  try {
    await $jui.confirm(msg, '删除确认');
    await api.msgtpl.removeTpl(func.id);
    await init();
  } catch (e) {
    console.error(e);
  }
};

const handleSelect = (func) => {
  selected.value = func;
};

const handleCustomCloseWin = () => {
  formTempWinShow.value = false;
  init();
};

// Lifecycle
onMounted(() => {
  init();
});

// Watch
watch(
  () => props.formId,
  () => {
    init();
  }
);
</script>

<style lang="scss" scoped>
.comp-box {
  border-radius: 5px;
}
.msg-tpl-dft-wrap {
  background-color: #f0f9eb;
  color: #67c23a;
  padding: 10px;
  font-size: 12px;
  //margin-top: 10px;
}
.msg-tpl-dft {
  background: #fff;
  //margin: 5px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-flow: column;
  padding: 5px;
  border-radius: 5px;
  color: #999;

  > b {
    margin: 5px;
    color: #67c23a;
  }

  &-item {
    width: 100%;
    padding: 2px 5px;
    display: flex;
    justify-content: space-between;
    border-radius: 2px;

    > b {
      flex: 1;
      color: #409eff;
      text-align: right;
      //font-size: 10px;
    }
    > i {
      margin-right: 30px;
    }
    &:hover {
      background: #f0f9eb;
    }

    &-label {
      //width: 50px;
      font-size: 12px;
    }
  }
}
</style>
